<template>
  <div className="cfg-container">
    <div ref="cyContainer" className="cy"></div>
  </div>
</template>

<script>
import cytoscape from "cytoscape";
import dagre from "cytoscape-dagre";
import {message} from "ant-design-vue";

cytoscape.use(dagre);

export default {
  props: {
    cfgData: Object,
  },
  data() {
    return {
      cy: null,
    };
  },
  mounted() {
    this.initCytoscape();
  },
  watch: {
    cfgData: {
      handler(newData) {
        console.log("收到新的 cfgData:", newData);
        if (newData && newData.nodes && newData.edges) {
          this.updateCFG(newData);
        }
      },
      deep: true,
    },
  },
  methods: {
    initCytoscape() {
      if (!this.$refs.cyContainer) {
        console.error("cyContainer 还未渲染");
        return;
      }
      this.cy = cytoscape({
        container: this.$refs.cyContainer,
        elements: [],
        style: [
          {
            selector: "node",
            style: {
              label: "data(label)",
              "text-valign": "center",
              "text-halign": "center",
              "background-color": "#007bff",
              color: "#e31616",
              "font-size": "12px",
              "border-width": 1,
              "border-color": "#333",
              "text-wrap": "wrap", // 启用文本自动换行
              "text-max-width": "80px", // 设置文本最大宽度
            },
          },
          {
            selector: "edge",
            style: {
              "curve-style": "bezier",
              "target-arrow-shape": "triangle",
              "line-color": "#ccc",
              "target-arrow-color": "#ccc",
            },
          },
        ],
        layout: {
          name: "dagre",
          rankDir: "TB",
        },
      });
    },
    updateCFG(data) {
      try {
        if (!this.cy) {
          console.error("Cytoscape 实例未初始化");
          this.initCytoscape();
        }

        // 清除旧的图元素
        this.cy.elements().remove();

        // 添加新的图元素
        this.cy.add([
          ...data.nodes.map((node) => {
            if (!node.id || !node.label) {
              throw new Error(`节点数据格式错误: ${JSON.stringify(node)}`);
            }
            return {
              data: { id: String(node.id), label: node.label },
            };
          }),
          ...data.edges.map((edge) => {
            if (!edge.source || !edge.target) {
              throw new Error(`边数据格式错误: ${JSON.stringify(edge)}`);
            }
            return {
              data: { source: String(edge.source), target: String(edge.target) },
            };
          }),
        ]);

        // 应用布局
        this.cy.layout({ name: "dagre", rankDir: "TB" }).run();

        console.log("我结束了!");
      } catch (error) {
        message.error("处理图数据时出错");
        // console.error("处理图数据时出错:", error);
      }
      // console.log("我进来了!")
      // if (!this.cy) {
      //   console.error("Cytoscape 实例未初始化");
      //   this.initCytoscape();
      // }
      // this.cy.elements().remove();
      // this.cy.add([
      //   ...data.nodes.map((node) => ({
      //     data: {id: String(node.id), label: node.label},
      //   })),
      //   ...data.edges.map((edge) => ({
      //     data: {source: String(edge.source), target: String(edge.target)},
      //   })),
      // ]);
      // this.cy.layout({name: "dagre", rankDir: "TB"}).run();
      // console.log("我结束了!")
    },
  },
};
</script>

<style>
.cfg-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.cy {
  width: 100%;
  height: 86.7vh;
  border: 1px solid #ddd;
}
</style>
